
<template>
  <div>
    <div class="bg">
      <el-container>
        <el-header style="padding:0;">
          <div class="head">
            <div>
              <img src="../../../public/20230318112820.png" alt=""
              style="width: 50px;margin-left: 0px;">
            </div>
            <el-menu :default-active="$route.path" class="nav" mode="horizontal" @select="handleSelect"
              background-color="#785545" text-color="#fff" active-text-color="#fcba47" router>
              <el-menu-item index="/home/index" style="height: 60px;" >首页</el-menu-item>
              <el-menu-item index="/home/activity">活动</el-menu-item>
              <el-menu-item index="/home/community">社区</el-menu-item>
              <el-menu-item index="/home/topic">话题</el-menu-item>
              <el-input placeholder="请输入内容" style="width: 250px;" class="input" suffix-icon="el-icon-search" size="small">
              </el-input>
              <el-menu-item index="/usercenter">用户中心</el-menu-item>
              <el-menu-item index="/home/login">登录</el-menu-item>
              <el-menu-item index="/home/register">注册</el-menu-item>
            </el-menu>
            
          </div>
        </el-header>
        <img src="https://img.nyato.com/data/upload/2021/0608/16/60bf2b0367195.jpg" alt="" style="width:100%; height: 280px;">
        <!-- 左侧侧边栏 -->
      <el-container style="width: 1200px; margin: 20px auto">
        <el-aside style="height: 600px; width: 18%; margin-right: 20px;">
          <div class="text-conter">
             
            <div class="demo-basic--circle" style="background-color: #FFFFFF;margin-bottom: 20px; width: 215px;height: 200px;text-align: center;padding-top: 30px;box-sizing: border-box;">
              <div class="block" style="margin-bottom: 17px;">
                <el-avatar style="height: 100px;width:100px;" src="http://pic.imeitou.com/uploads/allimg/211216/3-211216092224521.jpg">
                </el-avatar>
              </div>
              <p style="font-size: 18px;color: #333333;">鱼饵</p>
            </div>
              <el-menu :default-active="$route.path" @open="handleOpen"
                @close="handleClose" style="width: 215px;" background-color="#ffffff"
                text-color="#333333" active-text-color="#F39800" router>
                <!-- <el-menu-item index="/usercenter/msg">1111</el-menu-item> -->
                <el-submenu index="/usercenter/welcome">
                  <template slot="title">
                    <i class="el-icon-setting"></i>
                    <span slot="title">账号设置</span>
                  </template>
                  <el-menu-item index="/usercenter/Information">
                    <i class="el-icon-edit"></i>
                    <span slot="title">资料信息</span>
                  </el-menu-item>
                  <el-menu-item index="/usercenter/ShippingAddress">
                    <i class="el-icon-map-location"></i>
                    <span slot="title">收货地址</span>
                  </el-menu-item>
                  <el-menu-item index="/usercenter/ModifyAvatar">
                    <i class="el-icon-picture-outline"></i>
                    <span slot="title">修改头像</span>
                  </el-menu-item>
                  <el-menu-item index="/usercenter/ResetPassword">
                    <i class="el-icon-key"></i>
                    <span slot="title">重置密码</span>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
          </div>
        </el-aside>
        <el-main style="overflow: none;padding: 20px;background-color: #FFFFFF;width: 100%;">
          
            <router-view/>
        </el-main>
      </el-container>
      </el-container>
    </div>
  </div>
</template>
 
<script>
export default {
  methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style lang="scss" scoped>
.head {
  background-color: #785545;
  display: flex;
  height: 60px;
  justify-content: center;
  .nav {
    width: 1000px;
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .input{
      &.foucs{
        border-color: #785545;
      }
    }
  }
}
.bg {
  background-color: #F5F5F5;
  .container {
    width: 1200px;
    margin: 0 auto;
  }
}
</style>
<style>
/* .el-menu {
  width: 215px;
} */
</style>

